<div class="page-layout blank dashboard-analysis">
    <section fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between stretch" fxLayoutGap.md="15px" fxLayoutGap.gt-md="30px">
        <mat-card class="card card-shadow" fxFlex="1 0 0%" fxFlex.xs="100" fxFlex.sm="48"
            *ngFor="let widget of widgets; let index = index;" 
            [ngClass.sm]="{'mb-20': index<2}" [ngClass.xs]="{'mb-20': index!==3}">
            <mat-card-header>
                <mat-card-title fxLayout="row wrap" fxLayoutAlign="space-between center">
                    <span class="grey-800">
                        <mat-icon>{{widget.titleIcon}}</mat-icon>
                        <span>{{widget.title}}</span>
                    </span>
                    <span class="grey-700 font-size-30">{{widget.currentAmount | thousandsSeparator}}</span>
                </mat-card-title>
                <mat-card-subtitle class="grey-500">
                    <mat-icon [ngClass]="widget.increase > 0 ? 'arrow-up' : 'arrow-down'">trending_flat</mat-icon>
                    同比{{widget.increase > 0 ? '增长' : '下降'}}{{widget.increase}}%
                </mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <div class="area-chart" echarts [options]="widget.chartOption"></div>
            </mat-card-content>
        </mat-card>
    </section>

    <section fxLayout="row wrap" fxLayout.gt-sm="row nowrap" fxLayoutAlign="space-between stretch" fxLayoutGap.md="15px" fxLayoutGap.gt-md="30px">
        <mat-card class="card card-shadow weather-card p-24" fxFlex="49" fxFlex.lt-md="100" ngClass.lt-md="mb-32">
            <mat-card-header>
                <mat-card-title class="m-0" fxLayoutAlign="space-between end">
                    Weather Report
                    <span class="font-size-12 secondary-text float-right">
                        数据来自-<a href="https://www.caiyunapp.com/" target="_blank">彩云天气</a>
                    </span>
                </mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <div fxLayout="row nowrap" fxLayoutAlign="space-between center">
                    <div class="realtime mt-20 mb-16 light-blue-text">
                        <mat-icon class="wi s-64" fontSet="weathericon" fontIcon="{{weatherReport.weathericon}}"></mat-icon>
                        <span class="realtime-temp font-size-50"> {{weatherReport.today?.temperature || 0}}<sup>°</sup></span>
                    </div>
                    <div class="text-right">
                        <h4 class="day font-size-30 m-0">{{weatherReport.day.xingqi}}</h4>
                        <small class="city secondary-text">{{weatherReport.day.date | date:'yyyy-MM-dd'}}</small>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Wind</td>
                            <td class="font-medium">
                                {{weatherReport.today?.wind?.direction}}° {{weatherReport.today?.wind?.speed}} km/h
                            </td>
                        </tr>
                        <tr>
                            <td>Humidity</td>
                            <td class="font-medium">{{weatherReport.today?.humidity}}%</td>
                        </tr>
                        <tr>
                            <td>PM2.5</td>
                            <td class="font-medium">{{weatherReport.today?.pm25}}</td>
                        </tr>
                        <tr>
                            <td>Cloud Cover</td>
                            <td class="font-medium">{{weatherReport.today?.cloudrate}}</td>
                        </tr>
                        <tr>
                            <td>Precipitation</td>
                            <td class="font-medium">{{weatherReport.today?.precipitation?.local?.intensity}}</td>
                        </tr>
                    </tbody>
                </table>
            </mat-card-content>
            <mat-divider></mat-divider>
            <mat-card-actions class="text-center" fxLayout="row nowrap">
                <div *ngFor="let day of weatherReport.future;" fxFlex="20">
                    <mat-icon class="wi" fontSet="weathericon" fontIcon="{{day.weathericon}}" color="accent"></mat-icon>
                    <span class="secondary-text"> {{day.date | date: 'MM-dd'}}</span><br>
                    <span class="font-size-18 secondary-text font-medium">{{day.avg}}°</span>
                </div>
            </mat-card-actions>
        </mat-card>
        <div fxFlex="1 0 0%" fxFlex.lt-md="100" fxLayout="column nowrap">
            <mat-card class="card card-shadow sales-card p-24 mb-20" ngClass.lt-md="mb-32">
                <mat-card-header>
                    <mat-card-title class="m-0">{{salesOption.prediction?.title}}</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <div class="mt-24" fxLayout="row nowrap" fxLayoutAlign="space-between start">
                        <div fxFlex="50">
                            <span class="font-size-30">${{salesOption.prediction?.profit}}</span><br>
                            <span class="font-size-20 m-0">
                                ({{salesOption.prediction?.amount?.min}}-{{salesOption.prediction?.amount?.max}} Sales)
                            </span>
                        </div>
                        <div class="sales-prediction" echarts fxFlex="50" [options]="salesOption.prediction?.chartOption"></div>
                    </div>
                </mat-card-content>
            </mat-card>
            <mat-card class="card card-shadow sales-card p-24">
                <mat-card-header>
                    <mat-card-title class="m-0">{{salesOption.difference?.title}}</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <div class="mt-24" fxLayout="row nowrap" fxLayoutAlign="space-between start">
                        <div fxFlex="50">
                            <span class="font-size-30">${{salesOption.difference?.profit}}</span><br>
                            <span class="font-size-20 m-0">
                                ({{salesOption.difference?.amount?.min}}-{{salesOption.difference?.amount?.max}} Sales)
                            </span>
                        </div>
                        <div class="sales-difference" echarts fxFlex="50" [options]="salesOption.difference?.chartOption"></div>
                    </div>
                </mat-card-content>
            </mat-card>
        </div>
    </section>
    
    <section fxLayout="row nowrap" fxLayout.lt-md="row wrap" fxLayoutAlign="space-between start" fxLayoutGap.gt-sm="30px">
        <div class="card card-shadow" fxFlex="59" fxFlex.lt-md="100" ngClass.lt-md="mb-32">
            <div class="scatter-map" echarts [options]="scatterMapOption"></div>
        </div>
        <div class="card card-shadow" fxFlex="39" fxFlex.lt-md="100">
            <div class="trend-bar" echarts [options]="trendBarOption"></div>
            <div class="counter text-left">
                <div class="counter-label">Trends in visits in the past week</div>
                <div class="counter-number-group">
                    <span class="counter-number">12,673 </span>
                    <span class="counter-number-related text-uppercase font-size-14"> visits</span>
                </div>
            </div>
        </div>
    </section>
</div>
